<template>
  <div>
    <content-wrapper
      :tableList="tableList"
      :searchList="searchList"
      :setting="setting"
      @changeOpt="changeOpt"
      @changeTable="changeTable"
      @formValue="formValue"
    >
      <div slot="searchLeft">
        <a-button
          type="primary"
          style="margin-right: 20px"
          @click="$commonJs.goPage('addComment')"
          :disabled="!$commonJs.isAth('addComment')"
        >
          <a-icon type="plus" />
          新增
        </a-button>
        <a-button type="primary" style="margin-right: 20px" @click="exportFile">
          <a-icon type="cloud-download" />
          导出
        </a-button>
      </div>
    </content-wrapper>
    <a-modal
      title="审核"
      :visible="visible"
      @ok="handleOk"
      @cancel="cancelTheAudit"
    >
      <p class="content">
        <span class="label">原贴标题：</span
        ><span class="info">{{ checkItem.title }}</span>
      </p>
      <p class="content">
        <span class="label">内容：</span
        ><span class="info">{{ checkItem.comment }}</span>
      </p>
      <p class="content">
        <span class="label">评论用户：</span
        ><span class="info">{{ checkItem.member_name }}</span>
      </p>
      <a-divider>审核</a-divider>
      <a-form id="components-form-demo-validate-other" :form="form">
        <a-form-item v-bind="formItemLayout" label="审核意见">
          <a-radio-group
            @change="changeCheck"
            v-decorator="[
              'status',
              {
                rules: [{ required: true, message: '必填项' }]
              }
            ]"
          >
            <a-radio value="3">
              同意
            </a-radio>
            <a-radio value="2">
              拒绝
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          v-if="isShowRefuse"
          v-bind="formItemLayout"
          label="拒绝原因"
        >
          <a-radio-group
            v-decorator="[
              'error',
              {
                rules: [{ required: true, message: '必填项' }]
              }
            ]"
          >
            <a-radio value="1">
              被多人举报
            </a-radio>
            <a-radio value="2">
              言论过激
            </a-radio>
            <a-radio value="3">
              违规
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Modal } from "ant-design-vue";
export default {
  name: "index",
  components: {
    [Modal.name]: Modal,
    contentWrapper: () => import("@/components/contentWrapper/index")
  },
  computed: {
    ...mapState(["isPC"])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      tableList: {
        columns: [
          {
            title: "ID",
            dataIndex: "id",
            align: "center",
            isShowMobile: true,
            width: 60
          },
          {
            title: "内容",
            dataIndex: "comment",
            width: 350,
            scopedSlots: { customRender: "comment" }
          },
          {
            title: "原贴标题/ID",
            dataIndex: "text",
            width: 350,
            type: "title",
            scopedSlots: { customRender: "text" }
          },
          {
            title: "评论用户/ID",
            dataIndex: "member_name"
          },
          {
            title: "发布时间",
            dataIndex: "created_at"
          },
          {
            title: "审核意见",
            dataIndex: "check",
            width: 150,
            align: "center",
            type: "tag",
            scopedSlots: { customRender: "check" }
          },
          {
            title: "拒绝原因",
            width: 200,
            dataIndex: "error"
          },
          {
            title: "操作",
            dataIndex: "opt",
            width: 120,
            type: "btn",
            list: [
              {
                key: "status",
                value: "1",
                ath: "checkComment",
                label: "审核",
                extraValue: "check",
                className: "text-green divider"
              },
              {
                ath: "deleteComment",
                label: "删除",
                extraValue: "delete",
                className: "text-danger"
              }
            ],
            scopedSlots: { customRender: "opt" },
            isShowMobile: true
          }
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0
        },
        sorter: {}
      },
      searchList: [
        {
          type: "input",
          label: "标题",
          placeholder: "标题",
          name: "data"
        },
        {
          type: "input",
          label: "评论用户/ID",
          placeholder: "评论用户/ID",
          name: "member"
        },
        {
          type: "search",
          label: "审核状态",
          name: "status",
          option: [
            {
              value: 1,
              title: "待审核"
            },
            {
              value: 2,
              title: "已拒绝"
            },
            {
              value: 3,
              title: "已通过"
            }
          ]
        }
      ],
      searchInfo: {
        data: "",
        member: "",
        status: ""
      },
      setting: {},
      checkItem: {},
      visible: false,
      isShowRefuse: false
    };
  },
  methods: {
    changeCheck(e) {
      if (e.target.value === "2") {
        this.isShowRefuse = true;
      } else {
        this.isShowRefuse = false;
      }
    },
    changeOpt(value, type) {
      switch (type) {
        case "delete":
          this.del(value);
          break;
        case "check":
          this.check(value);
          break;
      }
    },
    changeTable(pagination) {
      Object.assign(this.tableList.pagination, pagination);
      this.getInfo();
    },
    formValue(values) {
      this.tableList.pagination.current = 1;
      Object.assign(this.searchInfo, values);
      this.getInfo();
    },
    cancelTheAudit() {
      this.visible = false;
      this.form.resetFields();
    },
    del(item) {
      let that = this;
      Modal.confirm({
        title: "您确定删除该评论吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$ajax
            .post(that.$api.deleteComment, { id: item.id })
            .then(() => {
              that.$notification.success({
                message: "删除成功！"
              });
              that.getInfo();
            })
            .catch(err => {
              that.$notification.error({
                message: err
              });
            });
        }
      });
    },
    check(item) {
      Object.assign(this.checkItem, item);
      this.visible = true;
    },
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          switch (values.error) {
            case "1":
              values.error = "被多人举报";
              break;
            case "2":
              values.error = "言论过激";
              break;
            case "3":
              values.error = "违规";
              break;
          }
          values.id = this.checkItem.id;
          this.$ajax
            .post(this.$api.checkComment, values)
            .then(() => {
              this.$notification.success({
                message: "审核成功"
              });
              this.visible = false;
              this.getInfo();
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    },
    exportFile() {
      let url = this.$api.downloadCommentList;
      if (this.searchInfo.data) {
        url += "&data=" + this.searchInfo.data;
      } else {
        url += "&data=";
      }
      if (this.searchInfo.member) {
        url += "&member=" + this.searchInfo.member;
      } else {
        url += "&member=";
      }
      url +=
        "&excel_download=1&token=" +
        this.$crypto.getAES(localStorage.getItem("token"));
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", ""); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    getInfo() {
      this.$ajax
        .get(this.$api.commentList, {
          data: this.searchInfo.data,
          member: this.searchInfo.member,
          status: this.searchInfo.status,
          page_size: this.tableList.pagination.pageSize,
          page: this.tableList.pagination.current
        })
        .then(res => {
          for (let item of res.data) {
            if (item.error === null) {
              item.error = "";
            }
            item.created_at = this.$commonJs.timer(item.created_at);
          }
          this.tableList.dataSource = res.data;
          this.tableList.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (to.name === "associationComment" && from.name === "addComment") {
      this.getInfo();
    }
    next();
  },
  created() {
    if (this.$route.query.member) {
      this.searchInfo.member = this.$route.query.member;
    } else if (this.$route.query.PostingTitle) {
      this.searchInfo.data = this.$route.query.PostingTitle;
    } else if (this.$route.query.toCommentOn) {
      this.searchInfo.status = this.$route.query.toCommentOn;
    }
    if (!this.isPC) {
      this.tableList.pagination.pageSize = 6;
      this.searchInfo.status = 1;
    }
    this.getInfo();
  }
};
</script>

<style scoped lang="less">
.content {
  .flex_content();
  line-height: 30px;
  .info {
    .flex_one();
    width: 80%;
    word-wrap: break-word;
  }
  .label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }
}
</style>
